<template>
  <button class="bw-bitton" :class="className" @click="clickCallback">
    <icon v-if="icon" :name="icon" />
    <slot></slot>
  </button>
</template>

<script>
import { oneOf } from '@/utils/utils'

export default {
  name: 'BwButton',
  props: {
    type: {
      validator (value) {
        return oneOf(value, ['default', 'primary', 'success', 'warning', 'link'])
      },
      default: 'default'
    },
    size: {
      validator (value) {
        return oneOf(value, ['large', 'small'])
      },
      default: 'large'
    },
    plain: Boolean,
    round: Boolean,
    inline: Boolean,
    icon: String,
    loading: Boolean
  },
  computed: {
    className () {
      return {
        [this.type]: true,
        [this.size]: true,
        plain: this.plain,
        round: this.round,
        inline: this.inline
      }
    }
  },
  methods: {
    clickCallback (e) {
      this.$emit('click', e)
    }
  }
}
</script>

<style lang="scss" scoped>
.bw-bitton {
  @include wh(100%, 88px);
  text-align: center;
  line-height: 88px;
  border: 0;
  font-size: 28px;
  outline: none;

  &.default {
    background: #fff;
    color: $base-color;
  }
  &.primary {
    background: $base-color;
    color: #fff;
  }
  &.success {
    background: $background-color-success;
    color: #fff;
  }
  &.warning {
    background: $background-color-warning;
    color: #fff;
  }
  &.link {
    @include wh(auto, auto);
    line-height: inherit;
    background: transparent;
    color: $base-color;
    display: inline;
  }
  &.small {

  }
  &.plain {
    background: transparent;
    border: 1px solid transparent;
    &.default {
      border-color: $background-color-other;
      color: $base-color;
    }
    &.primary {
      border-color: $base-color;
      color: $base-color;
    }
    &.success {
      border-color: $background-color-success;
      color: $background-color-success;
    }
    &.warning {
      border-color: $background-color-warning;
      color: $background-color-warning;
    }
  }
  &.round {
    border-radius: 88px;
  }
  &.inline {
    @include wh(auto, auto);
    padding: 25px 60px;
    display: inline-block;
    border-radius: 80px;
    line-height: inherit;
  }
  &:disabled {
    @include grayscale();
    opacity: 0.5;
  }
}
</style>
